<template>
  <div class="h-search">
    <input
    class="h-search-input"
    type="text"
    :placeholder="placeholder"
    v-model="inputVal"
    @focus="focus"
    />
    <img class="search-logo" src="../../static/search.png" alt />
  </div>
</template>

<script>
export default {
  props:{
    placeholder:{
      type:String,
      default:'请输入搜索内容'
    },
    value:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      inputVal:''
    };
  },
  watch:{
    inputVal(newVal){
      if(newVal){
        console.log(newVal)
      }
    },
    value(val){
      this.inputVal = val
    }
  },
  methods:{
    focus(){
      if(this.inputVal){
        console.log('焦点集中时的inputval')
      }
    }
  }
};
</script>
<style>
.h-search {
  margin-left: 30px;
  width: 298px;
  height: 33px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(237, 237, 237, 1);
  opacity: 0.66;
  border-radius: 4px;
  float: left;
  /* background: yellow; */
}
.h-search-input {
  width: 255px;
  border: none;
  height: 100%;
  /* outline-color: lightskyblue; */
  outline: none;
  padding-left: 16px;

  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 19px;
  color: grey;
}
.search-logo {
  width: 14px;
  height: 14px;
  /* background: blue; */
  display: inline-block;
  vertical-align: middle;
}
</style>
